<template>
	<div class="all">
		<article class="cont">
			<download></download>
			<h3 class="title">{{title}}</h3>
			<p class="time">{{getDateDiff(publishtime)}}</p>
      <line-breaks class="content" :text="articleContent"></line-breaks>
			<div class="contimg"><img :src="imgUrl"/></div>
			<p class="img-origin">{{imgOrigin}}</p>
		</article>

		<div class="comment big">
			<p class="commenttitle">大咖点评</p>
			<ul>
				<li
          v-for="item in infoCommentsVosArr1"
          :key="item.createDate"
          @click="openCommentPage(item)">
          <div class="avatar">
            <img :src="item.headImgUrl"/>
          </div>
          <div class="commentcont">
            <div class="commentinfo">
              <p class="name">{{item.createUserName}}</p>
              <p class="zan"><img src="../../assets/img/zan.png"/>{{item.praiseCount}}</p>
            </div>
            <p class="commentcontent">
              {{item.content}}
            </p>
            <p>
              <span class="comment-time">{{getDateDiff(item.createDate)}}</span>
              <span class="huifu" v-if="item.commentsCount > 0">有{{item.commentsCount}}条回复></span>
            </p>
          </div>
				</li>
			</ul>
		</div>
		<div class="comment more">
			<p  class="commenttitle">更多评论</p>

      <ul>
				<li
          v-for="item in infoCommentsVosArr2"
          :key="item.createDate"
          @click="openCommentPage(item)">
          <div class="avatar">
            <img :src="item.headImgUrl"/>
          </div>
          <div class="commentcont">
            <div class="commentinfo">
              <p class="name">{{item.createUserName}}</p>
              <p class="zan"><img src="../../assets/img/zan.png"/>{{item.praiseCount}}</p>
            </div>
            <p class="commentcontent">
              {{item.content}}
            </p>
            <p>
              <span class="comment-time">{{getDateDiff(item.createDate)}}</span>
              <span v-if="item.commentsCount > 0" class="huifu">有{{item.commentsCount}}条回复></span>
            </p>
          </div>
				</li>
			</ul>

		</div>

	</div>
</template>

<script>
import FocusApi from "../../api/focus.js";
import download from '../../components/download.vue';
import lineBreaks from '../../components/lineBreaks.vue';


export default {
	 components: {
        download,
        lineBreaks
    },
  data() {
    return {
      id: this.$route.query.id,
      title: "",
      articleContent: "",
      imgUrl: "",
      imgOrigin: "",
      infoCommentsVosArr1: [],
      infoCommentsVosArr2: [],
      publishtime: ""
    };
  },

  mounted() {
    FocusApi.getfocus(this.id, "").then(res => {
      let data = res.result;

      let _this = this;
      this.title = data.title;
      this.articleContent = data.articleContent;
      this.imgUrl = data.imgUrl;
      this.imgOrigin = data.imgOrigin;
      this.publishtime = data.publishtime;
      for (let index = 0; index < data.infoCommentsVos.length; index++) {
        let item = data.infoCommentsVos[index];
        if (item.userType == 0) {
          _this.infoCommentsVosArr2.push(item);
        } else if (item.userType == 1) {
          _this.infoCommentsVosArr1.push(item);
        }
      }
    });
  },
  methods: {
    getDateDiff(dateTimeStamp) {
      var result;
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var halfamonth = day * 15;
      var month = day * 30;
      var now = new Date().getTime();
      var diffValue = now - dateTimeStamp;
      if (diffValue < 0) {
        return;
      }
      var monthC = diffValue / month;
      var weekC = diffValue / (7 * day);
      var dayC = diffValue / day;
      var hourC = diffValue / hour;
      var minC = diffValue / minute;
      if (monthC >= 1) {
        if (monthC <= 12) result = "发布于" + parseInt(monthC) + "月前";
        else {
          result = "发布于" + parseInt(monthC / 12) + "年前";
        }
      } else if (weekC >= 1) {
        result = "发布于" + parseInt(weekC) + "周前";
      } else if (dayC >= 1) {
        result = "发布于" + parseInt(dayC) + "天前";
      } else if (hourC >= 1) {
        result = "发布于" + parseInt(hourC) + "小时前";
      } else if (minC >= 1) {
        result = "发布于" + parseInt(minC) + "分钟前";
      } else {
        result = "刚刚";
      }
      return result;
    },

    openCommentPage (comment) {
      window.sessionStorage.setItem('focusComment', JSON.stringify(comment))

      window.location.href = window.location.origin + `/focus/#/comment/?commentId=${comment.id}&share=true`;
    }
  }
};
</script>

<style scoped="scoped">
.all {
  font-size: 0.32rem;
  font-family: "微软雅黑";
  text-align: justify;
  margin-top: 1rem;
}

.cont {
  padding: 0.3rem;
}

.title {
  color: #282828;
  font-size: 0.34rem;
  margin-bottom: 0.2rem;
  font-family: "微软雅黑";
  text-align: justify;
}
.time {
  color: #707070;
  font-size: 0.24rem;
  margin-bottom: 0.2rem;
  font-family: "微软雅黑";
}
.content {
  font-size: 0.28rem;
  line-height: 1.5;
  color: #060604;
  margin-bottom: 0.3rem;
  font-family: "微软雅黑";
  /* letter-spacing: 0.02rem; */
  text-align: justify;
  font-weight: 500;
}
.contimg {
  margin: 0 -0.3rem;
}

.contimg img {
  display: block;
  width: 100%;
}

.img-origin {
  font-size: 0.28rem;
  color: #060604;
  margin-top: 0.15rem;
}

.big {
  border-top: 1px solid #cccccc;
  /* padding: 0.3rem 0; */
  font-family: "微软雅黑";
}

.more {
  /* padding: 0.3rem 0; */
  font-family: "微软雅黑";
}
.commenttitle {
  line-height: 1;
  font-size: 0.34rem;
  padding-top: 0.3rem;
  /* margin-bottom: 0.3rem; */
  font-family: "微软雅黑";
  padding-left: 0.3rem;
}
.comment ul li {
  width: 92%;
  display: flex;
  padding: 0.3rem 0.3rem 0.2rem;
  border-bottom: 1px solid #cccccc;
  justify-content: flex-start;
  font-family: "微软雅黑";
  /* padding-bottom: 0.3rem; */
}
.avatar {
	width: 0.6rem;
  height: 0.6rem;
	border: 0px solid red;
	overflow: hidden;
	margin-right: 10px;
}

@media all and (max-width: 370px) {
  .avatar {
    width: 30px;
    height: 30px;
  }
}

.avatar img {
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.commentcont {
  width: 86%;
  font-family: "微软雅黑";
  flex: 1;
}
.name {
  font-size: 0.28rem;
  color: #5b6a92;
  font-family: "微软雅黑";
}
.huifu {
  font-size: 0.28rem;
  color: #29abae;
  padding-left: 0.20rem;
  font-family: "微软雅黑";
}
.commentinfo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.1rem;
  font-family: "微软雅黑";
}
.comment-time {
  font-size: 0.28rem;
  color: #8d8d8d;
  font-family: "微软雅黑";
}
.commentcontent {
  font-size: 0.28rem;
  color: #282828;
  line-height: 1.5;
  text-align: justify;
  /* margin-bottom: 0.1rem; */
}

.zan {
  color: #909090;
  font-size: 0.24rem;
}

.zan img {
  width: 0.4rem;
  vertical-align: text-bottom;
}
</style>
